@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';

:root {
  --padding: 10px;
  --max-height: 300px;
  --color-border: #ccc;
  --width: 200px;
  --border-radius: 5px;
  --color-shadow: rgba(0, 0, 0, 0.1);
  --popover-top: 50px;
  --popover-left: 50px;
  --color-background: #fff;
  --color-background-dark: rgba(0, 0, 0, 0.4);
}

.codex-editor__redactor {
  padding-bottom: 0px !important;
}

.ce-popover--opened > .ce-popover__container {
  @apply opacity-100 pointer-events-auto border;
  padding: var(--padding);
  max-height: var(--max-height);
  animation: panelShowing 0.1s ease;
  border-color: var(--color-border);
  z-index: 9999;
}

.ce-popover__container {
  @apply overflow-hidden box-border absolute flex flex-col z-10 opacity-0 pointer-events-none p-0 border-none;
  min-width: var(--width);
  width: var(--width);
  max-height: var(--max-height);
  border-radius: var(--border-radius);
  box-shadow: 0 3px 15px -3px var(--color-shadow);
  left: var(--popover-left);
  top: var(--popover-top);
  background: var(--color-background);
  z-index: 9999;
}

/* Light mode scrollbar */
.ce-popover__items::-webkit-scrollbar {
  width: 4px;
}

.ce-popover__items::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.ce-block__content {
  max-width: 100vw !important;
  margin-left: 60px;
}

.readonly .ce-block__content {
  margin-left: 10px !important;
}

.ce-toolbar__content {
  margin-left: 60px !important;
}

.ce-block__content h1 {
  @apply h1;
}

.ce-block__content h2 {
  @apply h2;
}

.ce-block__content h3 {
  @apply h3;
}

.ce-block__content h4 {
  @apply h4;
}

.ce-block__content h5 {
  @apply h5;
}

.ce-block__content h6 {
  @apply h6;
}
